<template>
    <div>
<h1>首页---会员列表</h1>
<input type="text" placeholder="姓名模糊查" v-model="getdataps.name">
<input type="date" v-model="getdataps.d1" >- <input type="date" v-model="getdataps.d2">

<input type="radio"  v-model="getdataps.sex" name="sex" value="1"> 男
<input type="radio"  v-model="getdataps.sex" name="sex" value="2"> 女

<!-- <select v-model="getdataps.sex">
    <option value="0">请选择性别 </option>
    <option value="1">男</option>
    <option value="2">女</option>
</select> -->

<input type="button" value="查询" @click="querydata">

<hr>
<table class="table">
    <thead> 
        <tr>
            <td>id</td>
            <td>name</td>
            <td>birthday</td>
            <td>sex</td>
            <td>start</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="d in data">
            <td>插值显示 {{ d.id }}</td>
            <td>{{d.name}}</td>
            <td>{{  moment(d.birthday).format("yyyy年MM月DD日 HH时mm分") }}</td>
            <td>{{d.sex==1?"男":"女"}}</td>
            <td>{{d.start?"出勤":"请假"}}</td>
            <td>
                <input type="button" value="查看详情" @click="showdetail(d.id)">
                <input type="button" value="修改" @click="editer(d.id)">
            </td>
        </tr>
    </tbody>
</table>

    </div>


 
</template>

<script setup lang="ts">


import axios from 'axios';     ////从‘axios’中导入所有
import { ref,onMounted } from 'vue';   //从‘vue’中导入两个工具 ref和onMounted
import moment from 'moment';
import { useRouter } from 'vue-router';
const router = useRouter()

//查看详情
const showdetail=(val)=>{
    //打开详情网页
    router.push({path:'/showdetail',query:{vid:val}});
}
//打开编辑页面
const editer=(val)=>{
    //打开详情网页
    router.push({path:'/editer',query:{vid:val}});
}


//查询按钮
const querydata=()=>{
    getdata()
}


//查询参数，全局的
const getdataps=ref({
    name:'',
    d1:'',
    d2:'',
    sex:0
})

onMounted(()=>{
    getdata()
})

const data=ref([])
const getdata=()=>{
   /*  axios.get("",{params:{}}).then(res=>{})
    axios.post("",{}).then(res=>{}) */
   axios.get("https://localhost:7225/api/Member/GetMembers",{params:getdataps.value}).then(res=>{
    data.value = res.data;
   })
}

</script>

<style scoped>

</style>